<template>
  <a-card :bordered="false" style="height:100%;padding-bottom:200px; ">

    <a-form :form="form" @submit="handleSubmit">
<!--        <a-form-item v-bind="formItemLayout" label="数字input">
            <a-input-number></a-input-number>
        </a-form-item>-->
        <a-form-item v-bind="formItemLayout" label="E-mail校验">
            <a-input
                    v-decorator="['email',{rules: [{type: 'email',message: '不是一个合法的email！'},{required: true,message: '请输入email！'}]},
        ]"
            />
        </a-form-item>
        <a-form-item v-bind="formItemLayout">
      <span slot="label">
        昵称(长度2-15)&nbsp;
        <a-tooltip title="这里可以做说明">
          <a-icon type="question-circle-o"/>
        </a-tooltip>
      </span>
            <a-input
                    v-decorator.trim="[
          'nickname',
          {
            rules: [{ required: true,max:15,min:2, message: '请输入2-15字符的昵称!', whitespace: true }],
          },
        ]"
            />
        </a-form-item>

        <a-form-item v-bind="formItemLayout">
          <span slot="label">
            数字校验(整数、小数，负数)
          </span>
                <a-input
                        v-decorator="[
              'numberNum',
              {
                rules: [{ type:'number', message: '请输入数字',transform:(value)=> {return value==null?0:Number(value)}}],
              },
            ]"
                />
        </a-form-item>

        <a-form-item v-bind="formItemLayout">
          <span slot="label">
            浮点数
          </span>
                <a-input
                        v-decorator="[
              'floatNum',
              {
                rules: [{ type:'float', message: '请输入浮点数',transform:(value)=>{return value==null?0.01:Number(value)}}],
              },
            ]"
                />
            </a-form-item>

            <a-form-item v-bind="formItemLayout">
          <span slot="label">
            网址
          </span>
                <a-input
                        v-decorator="[
              'urlStr',
              {
                rules: [{ type:'url', message: '请输入有效网址！'}],
              },
            ]"
                />
        </a-form-item>

        <a-form-item v-bind="formItemLayout">
      <span slot="label">
        整数校验(正整数、负整数)
      </span>
            <a-input
                    v-decorator="[
          'integerNum',
          {
            rules: [{ type:'integer', message: '请输入整数',transform:(value)=> {return value==null?0:Number(value)}}],
          },
        ]"
            />
        </a-form-item>


        <a-form-item v-bind="formItemLayout">
      <span slot="label">
        日期校验
      </span>
            <a-date-picker v-decorator="['date-picker',  {rules: [{ type: 'date', required: true, message: '请选择时间' }]}]" />
        </a-form-item>


        <a-form-item v-bind="formItemLayout" label="区划选择(array校验)">
            <a-cascader
                    v-decorator="[
          'residence',
          {
            initialValue: [],
            rules: [
              { type: 'array', required: true, message: '请选择区划' },
            ],
          },
        ]"
                    :options="residences"
            />
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="电话号码校验">
            <a-input
                    v-decorator="[ 'phone',validatorRules.mobile]"
                    style="width: 100%"
            >
            </a-input>
        </a-form-item>

        <a-form-item v-bind="tailFormItemLayout">
            <a-button type="primary" html-type="submit">
                表单验证
            </a-button>
        </a-form-item>
    </a-form>
        <span>说明：</span>
        <br/>
        <span style="width: 80%;height: auto" disabled>ant design 共提供了内建校验类型有：string,number,boolean,method,regexp,integer,float,array,object,enum,date,url,hex,email,any(任意类型)，
            这些类型可以直接在rules中type中使用，不需要自定义写校验，数字类型的校验（number、integer、float）需要加上transform:(value)=> {return value==null?0:Number(value)} 默认是String，所以需要将其转换，
            若非必填可以设置个默认值跳过该校验，使用a-input-number 数字框也可以，复杂校验也可以使用自定义校验</span>
    </a-card>
</template>

<script>
    const residences = [
        {
            value: '420010',
            label: '武汉市',
            children: [
                {
                    value: '420103',
                    label: '江汉区',
                    children: [
                        {
                            value: '420103001',
                            label: '民族街道',
                        },
                    ],
                },
            ],
        },
        {
            value: '421200',
            label: '咸宁市',
            children: [
                {
                    value: '421281',
                    label: '赤壁市',
                    children: [
                        {
                            value: '421281101',
                            label: '赵李桥镇',
                        },
                    ],
                },
            ],
        },
    ];

    export default {
        data() {
            return {
                confirmDirty: false,
                residences,
                autoCompleteResult: [],
                formItemLayout: {
                    labelCol: {
                        xs: {span: 24},
                        sm: {span: 4},
                    },
                    wrapperCol: {
                        xs: {span: 24},
                        sm: {span: 20},
                    },
                },
                tailFormItemLayout: {
                    wrapperCol: {
                        xs: {
                            span: 24,
                            offset: 0,
                        },
                        sm: {
                            span: 16,
                            offset: 8,
                        },
                    },
                },

                validatorRules: {
                    mobile: {rules: [{validator: this.validateMobile}]},
                },

            };
        },
        beforeCreate() {
            this.form = this.$form.createForm(this, {name: 'validForm'});
        },
        methods: {
            handleSubmit(e) {
                e.preventDefault();
                this.form.validateFields((err, values) => {
                    console.log('表单数据为：',values);
                    if (!err) {
                        alert('表单校验成功！')
                    }
                });
            },
            validateMobile(rule, value, callback) {
                if (!value) {
                    callback()
                } else {
                    //update-begin
                    if (new RegExp(/^1[3|4|5|7|8|9][0-9]\d{8}$/).test(value)) {
                        //自定义校验的正确的返回为true ，否则无法触发表单提交
                        return true;
                    } else {
                        callback("请输入正确格式的手机号码!");
                    }
                }
            }

        },
    };
</script>